<template>
  <div class="tabMenu">
    <div class="tabMenuList">
      <ul>
        <li v-for="(item,index) in category" :class="btnSwitch(index)" :key="index" @click="itemBtnClick(index)">{{item.title}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: "TabMenu",
    props: {
      category: {
        type: Array,
        default(){
          return [];
        }
      }
    },
    data(){
      return {
        currentIndex: 0
      };
    },
    computed: {
      btnSwitch(){
        return function(index) {
          return {"active": this.currentIndex === index};
        }
      }
    },
    watch: {
      category(){
        this.$nextTick(() => {
          this.$emit("btnClick");
        });
      }
    },
    methods: {
      itemBtnClick(index){
        this.currentIndex = index;
        this.$emit("btnClickIndex",index);
      }
    }
  }
</script>

<style scoped>
  li{
    list-style: none;
  }
  .tabMenu{
    background-color: #f6f6f6;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .tabMenuList ul li{
    width: 100px;
    height: 45px;
    line-height: 45px;
    font-size: 14px;
    text-align: center;
    background-color: #F6F6F6;
  }
  .tabMenuList ul li.active{
    background-color: white;
    color: var(--color-tint);
    font-weight: bold;
    border-left: 3px solid var(--color-high-text);
  }
</style>